<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/base.js"></script>
    <!--    <script src="js/md5.js"></script>-->
    <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.min.js"></script>
</head>
<body>
<div>
    用户名: <input id="username" type="text" onchange="onUsernameChanged();"/> <span id="usernameText"></span><br>
    手机号: <input id="telephone" type="text" onchange="onTelephoneChanged();"/> <span id="telephoneText"></span><br>
    邮箱: <input id="email" type="text" onchange="onEmailChanged();"/> <span id="emailText"></span><br>
    密码: <input id="password" type="text"/><br>
    性别: <input id="gender" type="text"/><br>
    年龄: <input id="age" type="text"/><br>
    短信验证码: <input id="sms" type="text"/><span id="smsText"></span><br>
    <button onclick="onSendSMSClick();">发送短信验证码</button><br>
    <button onclick="onSignUpClick();">确认注册</button><br>
    <script>
        //alert(md5("123456"+"qianfenghulian"));
        //alert(md5("123456"+"!@#$zQ9a~!1"));
        function onUsernameChanged(){
            let username=document.getElementById("username").value;
            let json={};           //new HashMap();
            json.userInfo=username;//map.put("userInfo",username);
            json.type=3;           //map.put("type",3);
            //请求服务器，获取这个用户名是否已经存在
            $.rest("post","http://localhost:8080/user/check/username",json,function(result){
                let usernameSpan=document.getElementById("usernameText");
                if(result.code==200){
                    usernameSpan.innerHTML="用户名可以使用。";
                    usernameSpan.style.color="#00ff00";
                }else if(result.code==201){
                    usernameSpan.innerHTML="用户名已经存在。";
                    usernameSpan.style.color="#ff0000";
                }
            });
        }
        function onTelephoneChanged(){
            let telephone=document.getElementById("telephone").value;
            let json={};           //new HashMap();
            json.userInfo=telephone;//map.put("userInfo",username);
            json.type=1;           //map.put("type",1);
            //请求服务器，获取这个用户名是否已经存在
            $.rest("post","http://localhost:8080/user/check/telephone",json,function(result){
                let telephoneSpan=document.getElementById("telephoneText");
                if(result.code==200){
                    telephoneSpan.innerHTML="电话号码可以使用。";
                    telephoneSpan.style.color="#00ff00";
                }else if(result.code==201){
                    telephoneSpan.innerHTML="电话号码已经存在。";
                    telephoneSpan.style.color="#ff0000";
                }
            });
        }

        function onEmailChanged(){
            let email=document.getElementById("email").value;
            let json={};           //new HashMap();
            json.userInfo=email;//map.put("userInfo",email);
            json.type=2;           //map.put("type",2);
            //请求服务器，获取这个用户名是否已经存在
            $.rest("post","http://localhost:8080/user/check/email",json,function(result){
                let emailSpan=document.getElementById("emailText");
                if(result.code==200){
                    emailSpan.innerHTML="邮箱可以使用。";
                    emailSpan.style.color="#00ff00";
                }else if(result.code==201){
                    emailSpan.innerHTML="邮箱已经存在。";
                    emailSpan.style.color="#ff0000";
                }
            });
        }



        function onSendSMSClick(){
            let telephone=document.getElementById("telephone").value;
            //请求用户中心，发送短信验证码
            let json={};
            json.telephoneNo=telephone;
            $.rest("post","http://localhost:8080/user/sms",json,function(result){
                if(result.code==200){
                    alert("短信已发送");
                }else{
                    alert("短信发送失败");
                }
            });
        }

        function onSignUpClick(){
            let telephone=document.getElementById("telephone").value;
            let username=document.getElementById("username").value;
            let password=document.getElementById("password").value;
            let email=document.getElementById("email").value;
            let gender=document.getElementById("gender").value;
            let age=document.getElementById("age").value;
            let sms=document.getElementById("sms").value;
            password=md5(password+"qianfenghulian");
            let json={};
            json.telephone=telephone;
            json.username=username;
            json.password=password;
            json.email=email;
            json.gender=gender;
            json.age=age;
            json.sms=sms;
            $.rest("post","http://localhost:8080/user/signup",json,function(result){
                let smsSpan=document.getElementById("smsText");
                if(result.code==501){
                    //验证码错误
                    smsSpan.innerHTML="验证码错误";
                    smsSpan.style.color="#ff0000";
                }else if(result.code==502){
                    //验证码失效
                    smsSpan.innerHTML="验证码已经失效";
                    smsSpan.style.color="#ff0000";
                }else if(result.code==503){
                    //短信中心异常
                    smsSpan.innerHTML="短信服务暂不可用";
                    smsSpan.style.color="#ff0000";
                }else if(result.code==200){
                    //注册成功
                    smsSpan.innerHTML="短信验证成功";
                    smsSpan.style.color="#00ff00";
                    //window.location.href="....";
                }else if(result.code==500){
                    //注册失败
                    smsSpan.innerHTML="短信验证成功";
                    smsSpan.style.color="#00ff00";
                }
            });



        }
    </script>


</div>
</body>
</html>